<template>
	<view class="personal-center">
		<view class="user-card">
			<image class="avatar" :src="wxUserInfo.avatarUrl" mode="aspectFill"></image>
			<view class="user-info">
				<text class="name">{{ userInfo.name || wxUserInfo.nickName || '未设置' }}</text>
				<view class="info-row">
					<text class="label">ID:</text>
					<text class="value">{{ userInfo.hospitalId || '未设置' }}</text>
				</view>
				<view class="info-row">
					<text class="label">性别:</text>
					<text class="value">{{ genderText }}</text>
				</view>
				<view class="info-row">
					<text class="label">年龄:</text>
					<text class="value">{{ userInfo.age || 0 }}岁</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getUserInfo } from '@/api/user';

// 从缓存中获取微信用户信息
const wxUserInfo = ref(JSON.parse(uni.getStorageSync('wxUserInfo') || '{}'));
const userInfo = ref({
	name: '',
	hospitalId: null,
	gender: null,
	age: null
});

// 计算性别显示文本
const genderText = computed(() => {
	if (userInfo.value.gender !== undefined && userInfo.value.gender !== null) {
		return userInfo.value.gender === 1 ? '男' : userInfo.value.gender === 2 ? '女' : '未知';
	}
	return '未知';
});

// 获取用户信息
const fetchUserInfo = async () => {
	uni.showLoading({
		  title: '加载中...',
		  mask: true
		});
	try {
		const res = await getUserInfo();
		if (res.code === '200') {
			userInfo.value = res.data;
		}
		uni.hideLoading();
	} catch (error) {
		console.error('获取用户信息失败:', error);
		uni.showToast({ title: '获取信息失败', icon: 'none' });
	}
};

onMounted(() => {
	fetchUserInfo();
});
</script>

<style lang="scss">
.personal-center {
	padding: 20rpx;
	background-color: #F8F5FF;
	height: 100vh;
	.user-card {
		display: flex;
		align-items: flex-start; /* 调整为顶部对齐 */
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		
		.user-info {
			flex: 1;
			
			.name {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 20rpx; /* 增加下边距 */
			}
			
			.info-row {
				display: flex;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				
				.label {
					color: #999;
					margin-right: 10rpx;
					width: 80rpx; /* 固定标签宽度对齐 */
				}
				
				.value {
					color: #666;
				}
			}
		}
	}
}
</style>